<template>
  <div id="eyes-box"
       ref="eyes-box">
    <eyes></eyes>
    <eyes></eyes>
  </div>
</template>

<script lang="ts"
        setup>
import Eyes from '@/components/Eyes.vue'
import {onMounted} from 'vue'

// 鼠标按下时的位置
let basePoint:{x:number, y:number}
// 是否正在移动
let isMove: boolean = false

onMounted(() => {
  window.addEventListener('mousedown', handlerMouseDown)
  window.addEventListener('mousemove', handlerMouseMove)
  window.addEventListener('mouseup', handlerMouseUp)
})

// 鼠标按下回调
function handlerMouseDown(e:MouseEvent) {
  isMove = true
  basePoint = {x: e.x, y: e.y}
}

// 鼠标移动回调
function handlerMouseMove(e: MouseEvent) {
  if (!isMove) return

  window.ipcRenderer.send('window-move', {
    x: e.screenX - basePoint.x,
    y: e.screenY - basePoint.y
  })
}

// 鼠标松开回调
function handlerMouseUp() {
  isMove = false
}
</script>

<style lang="scss"
       scoped>
#eyes-box {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  width: 100%;
  height: 100%;
}
</style>